<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>合同管理 - 人力资源管理系统</title>
  <link rel="stylesheet" href="styles.css">
  <style>
    /* 移除重复的基础样式，只保留页面特定样式 */
    /* Tab导航样式 */
    .tab-container {
      margin-bottom: 24px;
    }

    .tab-nav {
      display: flex;
      border-bottom: 1px solid var(--border-color);
      margin-bottom: 24px;
    }

    .tab-item {
      padding: 12px 24px;
      font-size: 16px;
      color: var(--text-secondary);
      cursor: pointer;
      position: relative;
      transition: all 0.3s;
    }

    .tab-item:hover {
      color: var(--primary-color);
    }

    .tab-item.active {
      color: var(--primary-color);
      font-weight: 600;
    }

    .tab-item.active::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 0;
      right: 0;
      height: 2px;
      background: var(--primary-color);
    }

    .tab-content {
      display: none;
    }

    .tab-content.active {
      display: block;
    }

    /* 搜索区域样式 */
    .search-card {
      background: #fff;
      border-radius: 4px;
      padding: 16px;
      margin-bottom: 16px;
      border: 1px solid var(--border-color);
    }

    .search-form {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }

    .form-item {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .form-label {
      font-size: 14px;
      color: var(--text-primary);
      white-space: nowrap;
      min-width: 70px;
    }

    .form-input, .form-select {
      flex: 1;
      height: 32px;
      padding: 0 12px;
      border: 1px solid var(--border-color);
      border-radius: 4px;
      font-size: 14px;
      background: #fff;
    }

    .search-buttons {
      display: flex;
      gap: 16px;
    }

    .action-buttons {
      margin-bottom: 16px;
      display: flex;
      gap: 12px;
    }

    .search-button {
      padding: 0 16px;
      height: 32px;
      border: 1px solid var(--border-color);
      border-radius: 4px;
      background: #fff;
      color: var(--text-primary);
      cursor: pointer;
    }

    .search-button.primary {
      background: var(--primary-color);
      color: #fff;
      border: none;
    }

    /* 表格区域样式 */
    .table-card {
      background: #fff;
      border-radius: 8px;
      padding: 24px;
      box-shadow: var(--shadow);
    }

    .table-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;
    }

    .table-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--text-primary);
    }

    .table-button {
      padding: 0 16px;
      height: 32px;
      background: var(--primary-color);
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .table {
      width: 100%;
      border-collapse: collapse;
    }

    .table th {
      background: #fafafa;
      padding: 12px 16px;
      text-align: left;
      font-weight: 600;
      color: var(--text-primary);
      border-bottom: 1px solid var(--border-color);
    }

    .table td {
      padding: 16px;
      border-bottom: 1px solid var(--border-color);
    }

    .table tr:hover {
      background: #fafafa;
    }

    .operation-links {
      display: flex;
      gap: 16px;
    }

    .operation-link {
      color: var(--primary-color);
      text-decoration: none;
      cursor: pointer;
    }

    .operation-link.danger {
      color: var(--danger-color);
    }

    /* 分页控件样式 */
    .pagination {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-top: 16px;
      gap: 8px;
      border: 1px solid #ff4d4f;
      border-radius: 2px;
      display: inline-flex;
      float: right;
      margin-top: 20px;
      margin-bottom: 20px;
    }
    
    .pagination button {
      min-width: 32px;
      height: 32px;
      border: none;
      background: #fff;
      cursor: pointer;
      font-size: 14px;
      color: var(--text-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0;
      padding: 0 12px;
    }
    
    .pagination button.active {
      background: var(--primary-color);
      color: #fff;
    }
    
    .pagination button:not(.active):hover {
      color: var(--primary-color);
    }
    
    .pagination button:first-child, .pagination button:last-child {
      padding: 0 8px;
      background: #f5f5f5;
      color: #666;
      border-right: 1px solid #eee;
      border-left: 1px solid #eee;
    }

    /* 弹窗样式 */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 1000;
    }

    .modal-overlay.active {
      display: flex;
    }

    .modal-content {
      background: #fff;
      border-radius: 8px;
      width: 500px;
      max-height: 80vh;
      overflow-y: auto;
      padding: 24px;
      position: relative;
    }

    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;
    }

    .modal-title {
      font-size: 18px;
      font-weight: 600;
      color: var(--text-primary);
      margin: 0;
    }

    .modal-close {
      font-size: 20px;
      color: var(--text-secondary);
      cursor: pointer;
      padding: 4px;
      line-height: 1;
    }

    .modal-form {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .modal-footer {
      margin-top: 24px;
      display: flex;
      justify-content: flex-end;
      gap: 12px;
    }

    .filter-group {
      display: flex;
      gap: 16px;
      margin-bottom: 24px;
      flex-wrap: wrap;
      background: #fff;
      padding: 16px;
      border-radius: 8px;
      box-shadow: var(--shadow-sm);
    }

    .filter-item {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .filter-label {
      font-size: 14px;
      color: var(--text-secondary);
      white-space: nowrap;
    }

    .contract-status {
      display: inline-flex;
      align-items: center;
      padding: 4px 12px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 500;
    }

    .status-active {
      background: rgba(82, 196, 26, 0.1);
      color: var(--success-color);
    }

    .status-expired {
      background: rgba(255, 77, 79, 0.1);
      color: var(--danger-color);
    }

    .status-pending {
      background: rgba(250, 173, 20, 0.1);
      color: var(--warning-color);
    }

    .contract-actions {
      display: flex;
      gap: 8px;
    }

    .contract-actions .btn {
      padding: 4px 12px;
      font-size: 12px;
    }

    /* 响应式设计优化 */
    @media screen and (max-width: 1366px) {
      /* 搜索表单优化 */
      .search-form-grid {
        grid-template-columns: repeat(3, 1fr);
      }
      
      /* 内容区域padding调整 */
      .content {
        padding: 16px;
      }
      
      /* 表格内容溢出处理 */
      .table-container {
        overflow-x: auto;
      }
      
      /* 卡片布局调整 */
      .card-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }
    
    @media screen and (max-width: 1024px) {
      /* 搜索表单进一步优化 */
      .search-form-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      
      /* 卡片布局调整 */
      .card-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      
      /* 按钮组调整 */
      .action-buttons {
        flex-wrap: wrap;
      }
    }
    
    @media screen and (max-width: 768px) {
      /* 搜索表单再次优化 */
      .search-form-grid {
        grid-template-columns: 1fr;
      }
      
      /* 卡片布局调整 */
      .card-grid {
        grid-template-columns: 1fr;
      }
      
      /* 操作按钮调整 */
      .table-actions {
        flex-wrap: wrap;
      }
      
      /* 头部和尾部调整 */
      .topbar {
        padding: 0 16px;
      }
      
      /* 表格内容适应 */
      table {
        font-size: 12px;
      }
      
      th, td {
        padding: 8px 10px;
      }
      
      /* 弹窗模态框调整 */
      .modal-content {
        width: 95%;
        max-width: 95%;
        padding: 16px;
      }
    }
    
    /* 表格横向滚动优化 */
    .table-container {
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    
    /* 确保表格在横向滚动时表头固定 */
    .sticky-header th {
      position: sticky;
      top: 0;
      z-index: 10;
      background: #fafafa;
    }
    .tab-content{
      padding: 0 12px;
    }
  </style>
</head>
<body>
  <div class="layout">
    <!-- 使用公共侧边栏 -->
    <div id="sidebar-container"></div>

    <div class="main">
      <div class="topbar">
        <div class="title">合同管理</div>
        <div class="user">
          <span>管理员</span>
          <img src="assets/avatar.png" alt="用户头像">
        </div>
      </div>

      <div class="content">
        <div class="tab-container">
          <div class="tab-nav">
            <button class="tab-item active" data-tab="employee">员工合同</button>
            <button class="tab-item" data-tab="client">客户合同</button>
          </div>

          <!-- 员工合同标签页 -->
          <div class="tab-content active" id="employee-tab">
            <div class="search-card">
              <form class="search-form">
                <div class="form-item">
                  <label class="form-label">员工姓名</label>
                  <input type="text" class="form-input" placeholder="请输入员工姓名">
                </div>
                <div class="form-item">
                  <label class="form-label">合同编号</label>
                  <input type="text" class="form-input" placeholder="请输入合同编号">
                </div>
                <div class="form-item">
                  <label class="form-label">合同类型</label>
                  <select class="form-select">
                    <option value="">全部</option>
                    <option value="1">正式合同</option>
                    <option value="2">实习合同</option>
                    <option value="3">劳务合同</option>
                  </select>
                </div>
                <div class="form-item">
                  <label class="form-label">合同状态</label>
                  <select class="form-select">
                    <option value="">全部</option>
                    <option value="active">生效中</option>
                    <option value="expired">已到期</option>
                    <option value="terminated">已终止</option>
                  </select>
                </div>
                <div class="form-item">
                  <label class="form-label">签订日期</label>
                  <input type="date" class="form-input">
                </div>
                <div class="form-item">
                  <label class="form-label">到期日期</label>
                  <input type="date" class="form-input">
                </div>
                <div class="form-item search-buttons">
                  <button type="button" class="btn btn-primary">搜索</button>
                  <button type="button" class="btn btn-default">重置</button>
                </div>
              </form>
            </div>

            <div class="action-buttons">
              <button class="btn btn-primary">新增合同</button>
              <button class="btn btn-default">批量导出</button>
            </div>

            <div>
              <div class="table-container">
                <table class="table sticky-header" style="min-width: 1200px;">
                  <thead>
                    <tr>
                      <th width="15%">员工姓名</th>
                      <th width="15%">合同编号</th>
                      <th width="15%">合同类型</th>
                      <th width="15%">签订日期</th>
                      <th width="15%">到期日期</th>
                      <th width="10%">状态</th>
                      <th width="15%">操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>张三</td>
                      <td>EMP2024001</td>
                      <td>正式合同</td>
                      <td>2024-01-01</td>
                      <td>2027-01-01</td>
                      <td>生效中</td>
                      <td>
                        <div class="operation-links">
                          <a class="operation-link">查看</a>
                          <a class="operation-link">编辑</a>
                          <a class="operation-link danger">终止</a>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>李四</td>
                      <td>EMP2024002</td>
                      <td>正式合同</td>
                      <td>2024-01-05</td>
                      <td>2027-01-05</td>
                      <td>生效中</td>
                      <td>
                        <div class="operation-links">
                          <a class="operation-link">查看</a>
                          <a class="operation-link">编辑</a>
                          <a class="operation-link danger">终止</a>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>王五</td>
                      <td>EMP2024003</td>
                      <td>实习合同</td>
                      <td>2024-01-10</td>
                      <td>2024-07-10</td>
                      <td>生效中</td>
                      <td>
                        <div class="operation-links">
                          <a class="operation-link">查看</a>
                          <a class="operation-link">编辑</a>
                          <a class="operation-link danger">终止</a>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>赵六</td>
                      <td>EMP2024004</td>
                      <td>正式合同</td>
                      <td>2024-01-15</td>
                      <td>2026-01-15</td>
                      <td>生效中</td>
                      <td>
                        <div class="operation-links">
                          <a class="operation-link">查看</a>
                          <a class="operation-link">编辑</a>
                          <a class="operation-link danger">终止</a>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>钱七</td>
                      <td>EMP2024005</td>
                      <td>劳务合同</td>
                      <td>2024-01-20</td>
                      <td>2024-12-20</td>
                      <td>生效中</td>
                      <td>
                        <div class="operation-links">
                          <a class="operation-link">查看</a>
                          <a class="operation-link">编辑</a>
                          <a class="operation-link danger">终止</a>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>孙八</td>
                      <td>EMP2024006</td>
                      <td>实习合同</td>
                      <td>2024-01-25</td>
                      <td>2024-04-25</td>
                      <td>生效中</td>
                      <td>
                        <div class="operation-links">
                          <a class="operation-link">查看</a>
                          <a class="operation-link">编辑</a>
                          <a class="operation-link danger">终止</a>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>周九</td>
                      <td>EMP2024007</td>
                      <td>正式合同</td>
                      <td>2024-02-01</td>
                      <td>2027-02-01</td>
                      <td>生效中</td>
                      <td>
                        <div class="operation-links">
                          <a class="operation-link">查看</a>
                          <a class="operation-link">编辑</a>
                          <a class="operation-link danger">终止</a>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>吴十</td>
                      <td>EMP2024008</td>
                      <td>正式合同</td>
                      <td>2024-02-05</td>
                      <td>2027-02-05</td>
                      <td>生效中</td>
                      <td>
                        <div class="operation-links">
                          <a class="operation-link">查看</a>
                          <a class="operation-link">编辑</a>
                          <a class="operation-link danger">终止</a>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>郑十一</td>
                      <td>EMP2024009</td>
                      <td>劳务合同</td>
                      <td>2024-02-10</td>
                      <td>2024-08-10</td>
                      <td>生效中</td>
                      <td>
                        <div class="operation-links">
                          <a class="operation-link">查看</a>
                          <a class="operation-link">编辑</a>
                          <a class="operation-link danger">终止</a>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>王十二</td>
                      <td>EMP2024010</td>
                      <td>正式合同</td>
                      <td>2024-02-15</td>
                      <td>2027-02-15</td>
                      <td>生效中</td>
                      <td>
                        <div class="operation-links">
                          <a class="operation-link">查看</a>
                          <a class="operation-link">编辑</a>
                          <a class="operation-link danger">终止</a>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>陈十三</td>
                      <td>EMP2024011</td>
                      <td>正式合同</td>
                      <td>2023-11-01</td>
                      <td>2026-11-01</td>
                      <td>生效中</td>
                      <td>
                        <div class="operation-links">
                          <a class="operation-link">查看</a>
                          <a class="operation-link">编辑</a>
                          <a class="operation-link danger">终止</a>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>刘十四</td>
                      <td>EMP2024012</td>
                      <td>实习合同</td>
                      <td>2023-12-15</td>
                      <td>2024-03-15</td>
                      <td>生效中</td>
                      <td>
                        <div class="operation-links">
                          <a class="operation-link">查看</a>
                          <a class="operation-link">编辑</a>
                          <a class="operation-link danger">终止</a>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div class="pagination">
                <button>上一页</button>
                <button class="active">1</button>
                <button>2</button>
                <button>3</button>
                <button>下一页</button>
              </div>
            </div>
          </div>

          <!-- 客户合同标签页 -->
          <div class="tab-content" id="client-tab">
            <div class="search-card">
              <form class="search-form">
                <div class="form-item">
                  <label class="form-label">客户名称</label>
                  <input type="text" class="form-input" placeholder="请输入客户名称">
                </div>
                <div class="form-item">
                  <label class="form-label">合同编号</label>
                  <input type="text" class="form-input" placeholder="请输入合同编号">
                </div>
                <div class="form-item">
                  <label class="form-label">合同类型</label>
                  <select class="form-select">
                    <option value="">全部</option>
                    <option value="1">服务合同</option>
                    <option value="2">采购合同</option>
                    <option value="3">框架协议</option>
                  </select>
                </div>
                <div class="form-item">
                  <label class="form-label">合同状态</label>
                  <select class="form-select">
                    <option value="">全部</option>
                    <option value="active">生效中</option>
                    <option value="expired">已到期</option>
                    <option value="terminated">已终止</option>
                  </select>
                </div>
                <div class="form-item">
                  <label class="form-label">签订日期</label>
                  <input type="date" class="form-input">
                </div>
                <div class="form-item">
                  <label class="form-label">到期日期</label>
                  <input type="date" class="form-input">
                </div>
                <div class="form-item search-buttons">
                  <button type="button" class="btn btn-primary">搜索</button>
                  <button type="button" class="btn btn-default">重置</button>
                </div>
              </form>
            </div>

            <div class="action-buttons">
              <button class="btn btn-primary">新增合同</button>
              <button class="btn btn-default">批量导出</button>
            </div>

            <div class="table-card">
              <div class="table-header">
                <h3 class="table-title">客户合同列表</h3>
                <button class="btn btn-primary">新增合同</button>
              </div>
              <div class="table-container">
                <table class="table sticky-header" style="min-width: 1200px;">
                  <thead>
                    <tr>
                      <th width="15%">客户名称</th>
                      <th width="15%">合同编号</th>
                      <th width="15%">合同类型</th>
                      <th width="15%">签订日期</th>
                      <th width="15%">到期日期</th>
                      <th width="10%">状态</th>
                      <th width="15%">操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>ABC公司</td>
                      <td>CLI2024001</td>
                      <td>服务合同</td>
                      <td>2024-01-01</td>
                      <td>2025-01-01</td>
                      <td>生效中</td>
                      <td>
                        <div class="operation-links">
                          <a class="operation-link">查看</a>
                          <a class="operation-link">编辑</a>
                          <a class="operation-link danger">终止</a>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>示例科技有限公司</td>
                      <td>CLI2024002</td>
                      <td>采购合同</td>
                      <td>2024-01-10</td>
                      <td>2024-12-31</td>
                      <td>生效中</td>
                      <td>
                        <div class="operation-links">
                          <a class="operation-link">查看</a>
                          <a class="operation-link">编辑</a>
                          <a class="operation-link danger">终止</a>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>荣耀电子科技</td>
                      <td>CLI2024003</td>
                      <td>框架协议</td>
                      <td>2024-01-15</td>
                      <td>2026-01-15</td>
                      <td>生效中</td>
                      <td>
                        <div class="operation-links">
                          <a class="operation-link">查看</a>
                          <a class="operation-link">编辑</a>
                          <a class="operation-link danger">终止</a>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>未来网络有限公司</td>
                      <td>CLI2024004</td>
                      <td>服务合同</td>
                      <td>2024-01-20</td>
                      <td>2024-07-20</td>
                      <td>生效中</td>
                      <td>
                        <div class="operation-links">
                          <a class="operation-link">查看</a>
                          <a class="operation-link">编辑</a>
                          <a class="operation-link danger">终止</a>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>金融创新投资</td>
                      <td>CLI2024005</td>
                      <td>服务合同</td>
                      <td>2024-01-25</td>
                      <td>2024-06-25</td>
                      <td>生效中</td>
                      <td>
                        <div class="operation-links">
                          <a class="operation-link">查看</a>
                          <a class="operation-link">编辑</a>
                          <a class="operation-link danger">终止</a>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>华夏机械制造</td>
                      <td>CLI2024006</td>
                      <td>采购合同</td>
                      <td>2024-02-01</td>
                      <td>2024-08-01</td>
                      <td>生效中</td>
                      <td>
                        <div class="operation-links">
                          <a class="operation-link">查看</a>
                          <a class="operation-link">编辑</a>
                          <a class="operation-link danger">终止</a>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>绿色环保科技</td>
                      <td>CLI2024007</td>
                      <td>框架协议</td>
                      <td>2024-02-05</td>
                      <td>2026-02-05</td>
                      <td>生效中</td>
                      <td>
                        <div class="operation-links">
                          <a class="operation-link">查看</a>
                          <a class="operation-link">编辑</a>
                          <a class="operation-link danger">终止</a>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>北方教育集团</td>
                      <td>CLI2024008</td>
                      <td>服务合同</td>
                      <td>2024-02-10</td>
                      <td>2025-02-10</td>
                      <td>生效中</td>
                      <td>
                        <div class="operation-links">
                          <a class="operation-link">查看</a>
                          <a class="operation-link">编辑</a>
                          <a class="operation-link danger">终止</a>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>星辰医疗器械</td>
                      <td>CLI2024009</td>
                      <td>采购合同</td>
                      <td>2024-02-15</td>
                      <td>2024-08-15</td>
                      <td>生效中</td>
                      <td>
                        <div class="operation-links">
                          <a class="operation-link">查看</a>
                          <a class="operation-link">编辑</a>
                          <a class="operation-link danger">终止</a>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>东方食品集团</td>
                      <td>CLI2024010</td>
                      <td>框架协议</td>
                      <td>2024-02-20</td>
                      <td>2026-02-20</td>
                      <td>生效中</td>
                      <td>
                        <div class="operation-links">
                          <a class="operation-link">查看</a>
                          <a class="operation-link">编辑</a>
                          <a class="operation-link danger">终止</a>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>海洋物流</td>
                      <td>CLI2023045</td>
                      <td>服务合同</td>
                      <td>2023-11-10</td>
                      <td>2024-11-10</td>
                      <td>生效中</td>
                      <td>
                        <div class="operation-links">
                          <a class="operation-link">查看</a>
                          <a class="operation-link">编辑</a>
                          <a class="operation-link danger">终止</a>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>云图数据科技</td>
                      <td>CLI2023048</td>
                      <td>采购合同</td>
                      <td>2023-12-15</td>
                      <td>2024-12-15</td>
                      <td>生效中</td>
                      <td>
                        <div class="operation-links">
                          <a class="operation-link">查看</a>
                          <a class="operation-link">编辑</a>
                          <a class="operation-link danger">终止</a>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div class="pagination">
                <button>上一页</button>
                <button class="active">1</button>
                <button>2</button>
                <button>3</button>
                <button>下一页</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 新建员工合同弹窗 -->
  <div class="modal-overlay" id="newEmployeeContractModal">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title">新建员工合同</h3>
        <span class="modal-close" onclick="hideNewEmployeeContractModal()">×</span>
      </div>
      <div class="modal-form">
        <div class="form-item">
          <label class="form-label">员工姓名</label>
          <select class="form-select" id="employeeName">
            <option value="">请选择员工</option>
            <!-- 员工列表将通过API动态加载 -->
          </select>
        </div>
        <div class="form-item">
          <label class="form-label">合同模板</label>
          <select class="form-select" id="employeeTemplate">
            <option value="">请选择模板</option>
            <!-- 模板列表将通过API动态加载 -->
          </select>
        </div>
        <div class="form-item">
          <label class="form-label">合同开始时间</label>
          <input type="date" class="form-input" id="employeeStartDate">
        </div>
        <div class="form-item">
          <label class="form-label">合同结束时间</label>
          <input type="date" class="form-input" id="employeeEndDate">
        </div>
      </div>
      <div class="modal-footer">
        <button class="search-button" onclick="hideNewEmployeeContractModal()">取消</button>
        <button class="search-button primary" onclick="createEmployeeContract()">确定</button>
      </div>
    </div>
  </div>

  <!-- 新建客户合同弹窗 -->
  <div class="modal-overlay" id="newClientContractModal">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title">新建客户合同</h3>
        <span class="modal-close" onclick="hideNewClientContractModal()">×</span>
      </div>
      <div class="modal-form">
        <div class="form-item">
          <label class="form-label">客户名称</label>
          <select class="form-select" id="clientName">
            <option value="">请选择客户</option>
            <!-- 客户列表将通过API动态加载 -->
          </select>
        </div>
        <div class="form-item">
          <label class="form-label">合同模板</label>
          <select class="form-select" id="clientTemplate">
            <option value="">请选择模板</option>
            <!-- 模板列表将通过API动态加载 -->
          </select>
        </div>
        <div class="form-item">
          <label class="form-label">合同开始时间</label>
          <input type="date" class="form-input" id="clientStartDate">
        </div>
        <div class="form-item">
          <label class="form-label">合同结束时间</label>
          <input type="date" class="form-input" id="clientEndDate">
        </div>
      </div>
      <div class="modal-footer">
        <button class="search-button" onclick="hideNewClientContractModal()">取消</button>
        <button class="search-button primary" onclick="createClientContract()">确定</button>
      </div>
    </div>
  </div>

  <script src="js/common.js"></script>
  <script>
    // 页面加载完成后加载组件
    document.addEventListener('DOMContentLoaded', loadComponents);

    // 其他页面特定的 JavaScript 代码
    // Tab切换功能
    document.querySelectorAll('.tab-item').forEach(tab => {
      tab.addEventListener('click', () => {
        // 移除所有active类
        document.querySelectorAll('.tab-item').forEach(t => t.classList.remove('active'));
        document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
        
                  // 添加active类到当前tab
          tab.classList.add('active');
          document.getElementById(`${tab.dataset.tab}-tab`).classList.add('active');
        });
      });

      // 员工合同弹窗控制
      function showNewEmployeeContractModal() {
        document.getElementById('newEmployeeContractModal').classList.add('active');
        loadEmployeeList();
        loadEmployeeTemplates();
      }

      function hideNewEmployeeContractModal() {
        document.getElementById('newEmployeeContractModal').classList.remove('active');
        // 重置表单
        document.getElementById('employeeName').value = '';
        document.getElementById('employeeTemplate').value = '';
        document.getElementById('employeeStartDate').value = '';
        document.getElementById('employeeEndDate').value = '';
      }

      // 客户合同弹窗控制
      function showNewClientContractModal() {
        document.getElementById('newClientContractModal').classList.add('active');
        loadClientList();
        loadClientTemplates();
      }

      function hideNewClientContractModal() {
        document.getElementById('newClientContractModal').classList.remove('active');
        // 重置表单
        document.getElementById('clientName').value = '';
        document.getElementById('clientTemplate').value = '';
        document.getElementById('clientStartDate').value = '';
        document.getElementById('clientEndDate').value = '';
      }

      // 加载数据函数
      async function loadEmployeeList() {
        try {
          // 这里将通过API获取员工列表
          const employeeSelect = document.getElementById('employeeName');
          // 清空现有选项，保留默认选项
          employeeSelect.innerHTML = '<option value="">请选择员工</option>';
          // 模拟数据
          const employees = [
            { id: 1, name: '张三' },
            { id: 2, name: '李四' },
            { id: 3, name: '王五' }
          ];
          employees.forEach(emp => {
            const option = document.createElement('option');
            option.value = emp.id;
            option.textContent = emp.name;
            employeeSelect.appendChild(option);
          });
        } catch (error) {
          console.error('加载员工列表失败:', error);
        }
      }

      async function loadEmployeeTemplates() {
        try {
          // 这里将通过API获取员工合同模板列表
          const templateSelect = document.getElementById('employeeTemplate');
          // 清空现有选项，保留默认选项
          templateSelect.innerHTML = '<option value="">请选择模板</option>';
          // 模拟数据
          const templates = [
            { id: 1, name: '标准劳动合同' },
            { id: 2, name: '实习生合同' },
            { id: 3, name: '劳务合同' }
          ];
          templates.forEach(template => {
            const option = document.createElement('option');
            option.value = template.id;
            option.textContent = template.name;
            templateSelect.appendChild(option);
          });
        } catch (error) {
          console.error('加载合同模板失败:', error);
        }
      }

      async function loadClientList() {
        try {
          // 这里将通过API获取客户列表
          const clientSelect = document.getElementById('clientName');
          // 清空现有选项，保留默认选项
          clientSelect.innerHTML = '<option value="">请选择客户</option>';
          // 模拟数据
          const clients = [
            { id: 1, name: '阿里巴巴' },
            { id: 2, name: '腾讯科技' },
            { id: 3, name: '百度在线' }
          ];
          clients.forEach(client => {
            const option = document.createElement('option');
            option.value = client.id;
            option.textContent = client.name;
            clientSelect.appendChild(option);
          });
        } catch (error) {
          console.error('加载客户列表失败:', error);
        }
      }

      async function loadClientTemplates() {
        try {
          // 这里将通过API获取客户合同模板列表
          const templateSelect = document.getElementById('clientTemplate');
          // 清空现有选项，保留默认选项
          templateSelect.innerHTML = '<option value="">请选择模板</option>';
          // 模拟数据
          const templates = [
            { id: 1, name: '服务合同模板' },
            { id: 2, name: '采购合同模板' },
            { id: 3, name: '框架协议模板' }
          ];
          templates.forEach(template => {
            const option = document.createElement('option');
            option.value = template.id;
            option.textContent = template.name;
            templateSelect.appendChild(option);
          });
        } catch (error) {
          console.error('加载合同模板失败:', error);
        }
      }

      // 创建合同函数
      async function createEmployeeContract() {
        const employeeName = document.getElementById('employeeName').value;
        const template = document.getElementById('employeeTemplate').value;
        const startDate = document.getElementById('employeeStartDate').value;
        const endDate = document.getElementById('employeeEndDate').value;

        if (!employeeName || !template || !startDate || !endDate) {
          alert('请填写所有必填项');
          return;
        }

        try {
          // 这里将通过API创建员工合同
          console.log('创建员工合同:', { employeeName, template, startDate, endDate });
          hideNewEmployeeContractModal();
          // 刷新合同列表
          // refreshEmployeeContracts();
        } catch (error) {
          console.error('创建员工合同失败:', error);
        }
      }

      async function createClientContract() {
        const clientName = document.getElementById('clientName').value;
        const template = document.getElementById('clientTemplate').value;
        const startDate = document.getElementById('clientStartDate').value;
        const endDate = document.getElementById('clientEndDate').value;

        if (!clientName || !template || !startDate || !endDate) {
          alert('请填写所有必填项');
          return;
        }

        try {
          // 这里将通过API创建客户合同
          console.log('创建客户合同:', { clientName, template, startDate, endDate });
          hideNewClientContractModal();
          // 刷新合同列表
          // refreshClientContracts();
        } catch (error) {
          console.error('创建客户合同失败:', error);
        }
      }
    </script>
  </body>
</html>